<template>
  <div class="content">
    <div class="title"><span>...404呀！这个页面还没开发呢?</span></div>
    <div>{{ nowTime }}</div>
    <div>{{ nowWeek }}</div>
    <div>{{ nowDate }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: "",
      nowDate: null, //当前日期
      nowTime: null, //当前时间
      nowWeek: null, //当前星期
      currentTime: new Date(), // 获取当前时间
    };
  },
  created() {
    this.timer = setInterval(this.dealWithTime, 1000);
  },
  methods: {
    //第一种
    // getTime() {
    //   const date = new Date();
    //   const year = date.getFullYear();
    //   const month = date.getMonth() + 1;
    //   const day = date.getDate();
    //   const hour = date.getHours();
    //   const minute = date.getMinutes();
    //   const second = date.getSeconds();
    //   const str = "";
    //   if (this.hour > 12) {
    //     this.hour -= 12;
    //     this.str = " AM";
    //   } else {
    //     this.str = " PM";
    //   }
    //   this.month = this.check(month);
    //   this.day = this.check(day);
    //   this.hour = this.check(hour);
    //   this.minute = this.check(minute);
    //   this.second = this.check(second);
    //    this.nowDate = year + "年" + this.month + "月" + this.day+"日";
    //    this.nowTime = this.hour + ":" + this.minute + ":" + this.second + this.str;
    // },
    // check(i) {
    //   const num = i < 10 ? "0" + i : i;
    //   return num;
    // },

    //第二种
    dealWithTime() {
      let data = new Date();
      // 获取当前时间
      let Y = data.getFullYear();
      let M = data.getMonth() + 1;
      let D = data.getDate();
      let H = data.getHours();
      let Min = data.getMinutes();
      let S = data.getSeconds();
      let W = data.getDay();
      M = M < 10 ? "0" + M : M;
      D = D < 10 ? "0" + D : D;
      H = H < 10 ? "0" + H : H;
      Min = Min < 10 ? "0" + Min : Min;
      S = S < 10 ? "0" + S : S;
      switch (W) {
        case 0:
          W = "日";
          break;
        case 1:
          W = "一";
          break;
        case 2:
          W = "二";
          break;
        case 3:
          W = "三";
          break;
        case 4:
          W = "四";
          break;
        case 5:
          W = "五";
          break;
        case 6:
          W = "六";
          break;
        default:
          break;
      }
      this.nowDate = Y + "年" + M + "月" + D + "日 ";
      this.nowWeek = "星期" + W;
      this.nowTime = H + ":" + Min + ":" + S;
    },
    watch: {},
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
      }
    },
  },
};
</script>

<style lang="less" scoped>

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url("../../assets/nothome_top_bg.webp") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  .title {
    font-size: 42px;
    background-image: linear-gradient(135deg, rgb(166, 255, 0),red, blue);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}
</style>